<template>
  <div class="bill-settlement">
    <h3>完成账单清算</h3>
    <!-- 提示信息 -->
    <el-alert
      title="完成欠费缴费和余额退款后，方可完成退住办理"
      type="info"
      show-icon
      style="margin-bottom: 20px;"
    />

    <!-- 欠费区域 -->
    <el-card shadow="hover" class="fee-card">
      <template #header>
        <div class="card-header">
           欠费
          <span class="fee-meta">待办: 3 小计: 6000.00 元</span>
        </div>
      </template>
      <div v-for="(item, index) in arrearsList" :key="index" class="bill-item">
        <p>账单编号: {{ item.billNo }} <el-button type="primary" size="small">月度账单</el-button></p>
        <p>账单月份: {{ item.month }}</p>
        <p>应付金额: {{ item.amount }} 元</p>
      </div>
    </el-card>

    <!-- 余额区域 -->
    <el-card shadow="hover" class="fee-card" style="margin-top: 20px;">
      <template #header>
        <div class="card-header">
           余额
          <span class="fee-meta">小计: 0.00 元</span>
        </div>
      </template>
      <div class="balance-item">
        <p>预缴款: 0.00 元</p>
      </div>
    </el-card>

    <!-- 最终退款区域 -->
    <div class="total-area">
      <el-tag type="danger" effect="dark" size="small">
        <span class="step-tag">3</span> 最终退款金额=余额-欠费=-6000.00 元
      </el-tag>
      <el-button type="primary" style="margin-left: 20px;">上传退款凭证</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const arrearsList = ref([
  { billNo: 'ZD2048101015000001', month: '2048-10', amount: '2000.00' },
  { billNo: 'ZD2048101015000001', month: '2048-10', amount: '2000.00' },
  { billNo: 'ZD2048101015000001', month: '2048-10', amount: '2000.00' }
]);
</script>

<style scoped>
.bill-settlement {
  max-width: 800px;
  margin: 20px auto;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
}
.step-tag {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  background-color: #ff6b6b;
  color: #fff;
  border-radius: 50%;
  margin-right: 8px;
  font-size: 14px;
}
.fee-meta {
  font-size: 14px;
  color: #606266;
}
.bill-item {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
}
.balance-item {
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
}
.total-area {
  margin-top: 20px;
  display: flex;
  align-items: center;
}
</style>